<template>
  <div class="charts">
    <div class="row">
      <div class="box-a">
        <i class="el-icon-crop check" @click="charts1 = true"/>
        <div class="charts-title">MTBF</div>
        <div>
          <e-charts style="width: 96%;height: 32vh" autoresize :option="option1"/>
        </div>
      </div>
      <div class="box-b">
        <i class="el-icon-crop check" @click="charts2 = true"/>
        <div class="charts-title">设备可动率</div>
        <div>
          <e-charts style="width: 96%;height: 32vh" autoresize :option="option2"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="box-a">
        <i class="el-icon-crop check" @click="charts3 = true"/>
        <div class="charts-title">MTTR</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 32vh" autoresize :option="option3"/>
        </div>
      </div>
      <div class="box-b">
        <i class="el-icon-crop check" @click="charts4 = true"/>
        <div class="charts-title">工单分类占比</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh;margin-left: 20px;margin-top: 10px" autoresize :option="option4"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="box-a">
        <i class="el-icon-crop check" @click="charts5 = true"/>
        <div class="charts-title">设备故障停线次数</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 32vh" autoresize :option="option5"/>
        </div>
      </div>
      <div class="box-b">
        <i class="el-icon-crop check" @click="charts6 = true"/>
        <div class="charts-title">预防维护发现问题统计表</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh;margin-left: 20px;margin-top: 10px" autoresize :option="option6"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="box-a">
        <i class="el-icon-crop check" @click="charts7 = true"/>
        <div class="charts-title">设备故障停线时间</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 32vh" autoresize :option="option7"/>
        </div>
      </div>
      <div class="box-b">
        <i class="el-icon-crop check" @click="charts8 = true"/>
        <div class="charts-title">预防性维修占比</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh;margin-left: 20px" autoresize :option="option8"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="box-a">
        <i class="el-icon-crop check" @click="charts9 = true"/>
        <div class="charts-title">工单总数量、总工时</div>
        <div class="PM">
          <e-charts style="width: 110%;height: 38vh" autoresize :option="option9"/>
        </div>
      </div>
      <div class="box-b">
        <i class="el-icon-crop check" @click="charts10 = true"/>
        <div class="charts-title">工单完成率趋势</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh;margin-left: 20px" autoresize :option="option10"/>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="box-x">
        <i class="el-icon-crop check" @click="charts11 = true"/>
        <div class="charts-title">备件消费TOP10</div>
        <div class="PM">
          <e-charts style="width: 100%;height: 36vh;margin-left: 2vh" autoresize :option="option11"/>
        </div>
      </div>
      <div class="box-x">
        <i class="el-icon-crop check" @click="charts12 = true"/>
        <div class="charts-title">备件出库报表</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh" autoresize :option="option12"/>
        </div>
      </div>
      <div class="box-x">
        <i class="el-icon-crop check" @click="charts13 = true"/>
        <div class="charts-title">备件出库报表</div>
        <div class="PM">
          <e-charts style="width: 96%;height: 34vh;" autoresize :option="option13"/>
        </div>
      </div>
      <div class="box-x">
        <i class="el-icon-crop check" @click="charts14 = true"/>
        <div class="charts-title">备件采购报表</div>
        <div class="PM">
          <e-charts style="width: 110%;height: 38vh" autoresize :option="option14"/>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="charts1">
      <p class="charts-p">MTBF</p>
      <div>
        <div class="charts-s">车间：
          <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option1"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts2">
      <p class="charts-p">设备可动率</p>
      <div>
        <div class="charts-s">车间：
          <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option2"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts3">
      <p class="charts-p">MTTR</p>
      <div>
        <div class="charts-s">车间：
          <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option3"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts4">
      <p class="charts-p">工单分类占比</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div>周期：
            <el-date-picker style="width: 300px" v-model="value2" type="datetimerange" align="right"
                            start-placeholder="开始日期" end-placeholder="结束日期"
                            :default-time="['12:00:00', '08:00:00']">
            </el-date-picker>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option4"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts5">
      <p class="charts-p">设备故障停线次数</p>
      <div>
        <div class="charts-s">周期：
          <el-date-picker style="width: 240px;margin-right: 10px" v-model="value2" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option5"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts6">
      <p class="charts-p">预防维护发现问题统计表</p>
      <div>
        <div class="charts-picker">
          周期：
          <el-date-picker style="width: 300px;margin-right: 10px" v-model="value2" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option6"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts7">
      <p class="charts-p">设备故障停线时间</p>
      <div>
        <div class="charts-picker">
          周期：
          <el-date-picker style="width: 300px;margin-right: 10px" v-model="value2" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option6"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts8">
      <p class="charts-p">预防性维修占比</p>
      <div>
        <div class="charts-picker">
          周期：
          <el-date-picker style="width: 300px;margin-right: 10px" v-model="value2" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option8"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts9">
      <p class="charts-p">工单总数量、总工时</p>
      <div>
        <div class="charts-picker">
          周期：
          <el-date-picker style="width: 300px;margin-right: 10px" v-model="value2" type="datetimerange" align="right"
                          start-placeholder="开始日期" end-placeholder="结束日期"
                          :default-time="['12:00:00', '08:00:00']">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option9"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts10">
      <p class="charts-p">工单完成率趋势</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div style="display: flex">
            <div style="margin-top: 6px">工单种类：</div>
            <SelfSelect v-model="category" :showList="chartsCategory"/>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option10"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts11">
      <p class="charts-p">备件消费TOP10</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div style="display: flex">
            <div style="margin-top: 6px">工单种类：</div>
            <SelfSelect v-model="category" :showList="chartsCategory"/>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option11"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts12">
      <p class="charts-p">备件出库报表</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div style="display: flex">
            <div style="margin-top: 6px">工单种类：</div>
            <SelfSelect v-model="category" :showList="chartsCategory"/>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option12"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts13">
      <p class="charts-p">备件出库报表</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div style="display: flex">
            <div style="margin-top: 6px">工单种类：</div>
            <SelfSelect v-model="category" :showList="chartsCategory"/>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option13"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="charts14">
      <p class="charts-p">备件采购报表</p>
      <div>
        <div class="charts-flex">
          <div>车间：
            <Selects style="width: 240px" v-model="workshop_id" action="factoryList" :query="{ category: 2 }"/>
          </div>
          <div style="display: flex">
            <div style="margin-top: 6px">工单种类：</div>
            <SelfSelect v-model="category" :showList="chartsCategory"/>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div>
          <e-charts style="width: 96%;height: 40vh" autoresize :option="option14"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Selects from '@/components/select'
import SelfSelect from '@/components/select-o'
import { chartsCategory } from '@/utils/option'

export default {
  components: {
    Selects,
    SelfSelect
  },
  data() {
    return {
      workshop_id: null,
      charts1: false,
      charts2: false,
      charts3: false,
      charts4: false,
      charts5: false,
      charts6: false,
      charts7: false,
      charts8: false,
      charts9: false,
      charts10: false,
      charts11: false,
      charts12: false,
      charts13: false,
      charts14: false,
      chartsCategory,
      category: ''
    }
  },
  computed: {
    option1() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标', '平均']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          name: '分钟',
          type: 'value'
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [120, 31, 40, 50, 22, 66, 33, 31, 51, 101, 31, 90]
          },
          {
            name: '指标',
            type: 'line',
            data: [120, 31, 101, 12, 90, 140, 210, 51, 132, 101, 134, 120]
          },
          {
            name: '平均',
            type: 'line',
            data: [120, 132, 101, 33, 90, 14, 20, 45, 132, 31, 56, 50]
          }
        ]
      }
    },
    option2() {
      return {
        tooltip: {
          trigger: 'item',
          axisPointer: {       //坐标轴指示器
            type: 'cross'   //十字准星指示器
          }
        },
        legend: {
          data: ['指标', '工厂', '平均'],
          itemHeight: 1,
          itemWidth: 14,
          icon: 'rect',
          textStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: '#000'//Y轴内容文字颜色
            }
          },
          data: ['一月', '三月', '五月', '七月', '九月', '十一月']
        },
        yAxis: {
          min: 0,
          max: 100,
          nameTextStyle: {         //关键代码
            color: '#000'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2'
            }
          },
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: '#000'//Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [
          {
            name: '指标',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#036eb6',
                lineStyle: {
                  color: '#036eb6',
                  width: 0
                },
                areaStyle: {   //添加背景颜色
                  type: 'default',
                  color: '#036eb6',  //背景颜色
                  opacity: 0.5   //透明度
                }
              }
            },
            data: [50, 10, 60, 30, 30, 40]
          },
          {
            name: '工厂',
            type: 'line',
            symbolSize: 5, // 设置折线上圆点大小
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#f2d402',
                  width: 0
                },
                areaStyle: {   //添加背景颜色
                  type: 'default',
                  color: '#f2d402',  //背景颜色
                  opacity: 0.5   //透明度
                }
              }
            },
            data: [12, 33, 44, 11, 13, 65]
          },
          {
            name: '平均',
            type: 'line',
            symbol: 'none', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#fe441b',
                lineStyle: {
                  color: '#fe441b',
                  width: 0
                },
                areaStyle: {   //添加背景颜色
                  type: 'default',
                  color: '#fe441b',  //背景颜色
                  opacity: 0.5   //透明度
                }
              }
            },
            data: [0, 31, 41, 89, 11, 65]
          }
        ]
      }
    },
    option3() {
      return {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['工厂', '指标', '平均']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          name: '分钟',
          type: 'value'
        },
        series: [
          {
            name: '工厂',
            type: 'line',
            data: [120, 31, 40, 50, 22, 66, 33, 31, 51, 101, 31, 90]
          },
          {
            name: '指标',
            type: 'line',
            data: [120, 31, 101, 12, 90, 140, 210, 51, 132, 101, 134, 120]
          },
          {
            name: '平均',
            type: 'line',
            data: [120, 132, 101, 33, 90, 14, 20, 45, 132, 31, 56, 50]
          }
        ]
      }
    },
    option4() {
      return {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: ' center',
          padding: [10, 30, 4, 1],
          itemWidth: 20
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '自主点检' },
              { value: 735, name: '自主维护' },
              { value: 580, name: '专业维护' },
              { value: 484, name: '加油润滑' },
              { value: 300, name: '专业点检' },
              { value: 484, name: '专业巡检' },
              { value: 484, name: '报修工单' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    option5() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['车身', '总装', '涂装', '冲压', '动力', '生管'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: '#000'//Y轴内容文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（次）',
            min: 0,
            max: 30,
            nameTextStyle: {         //关键代码
              color: '#000'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#f2f2f2'
              }
            },
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: '#000'//Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '单位（次）',
            type: 'bar',
            barWidth: '20%',
            data: [21, 12, 3, 13, 3, 4, 5, 1, 3, 11, 5, 6]
          }
        ]
      }
    },
    option6() {
      return {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: ' center',
          padding: [10, 30, 4, 1],
          itemWidth: 20
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 66, name: '冲压' },
              { value: 31, name: '总装' },
              { value: 41, name: '涂装' },
              { value: 55, name: '车身' },
              { value: 12, name: '动力' },
              { value: 32, name: '生管' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['车身', '总装', '涂装', '冲压', '动力', '生管'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: '#000'//Y轴内容文字颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '分钟',
            min: 0,
            max: 15,
            nameTextStyle: {         //关键代码
              color: '#000'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#f2f2f2'
              }
            },
            axisLabel: {//y轴文字的配置
              textStyle: {
                color: '#000'//Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '时间/分钟',
            type: 'bar',
            barWidth: '20%',
            data: [10, 2, 11, 4, 5, 3, 6, 1, 3, 4, 12, 9],
            itemStyle: {
              color: '#57816d'
            }
          }
        ]
      }
    },
    option8() {
      return {
        xAxis: {
          type: 'category',
          data: ['车身', '总装', '涂装', '冲压', '动力', '生管']
        },
        yAxis: {
          min: 0,
          type: 'value',
          max: 100,
          nameTextStyle: {         //关键代码
            color: '#000'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2'
            }
          },
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: '#000'//Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [{
          data: [12, 21, 3, 4, 51, 16, 1],
          type: 'line',
          smooth: true
        }]
      }
    },
    option9() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['次数', '分钟']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '次数',
            min: 0,
            max: 5,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {}
          },
          {
            type: 'value',
            min: 0,
            max: 0,
            position: 'right',
            offset: 80,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {}
          },
          {
            type: 'value',
            name: '分钟',
            min: 0,
            max: 120,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {}
          }
        ],
        series: [
          {
            name: '次数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 1.2, 2.6, 1.7, 2.6, 1.2, 1.6, 1.0, 2.4, 3.3]
          },
          {
            name: '分钟',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7fb80e' },
                { offset: 0.5, color: '#7fb80e' },
                { offset: 1, color: '#7fb80e' }
              ])
            }
          }
        ]
      }
    },
    option10() {
      return {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          min: 0,
          type: 'value',
          max: 100,
          nameTextStyle: {         //关键代码
            color: '#000'
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2'
            }
          },
          axisLabel: {//y轴文字的配置
            textStyle: {
              color: '#000'//Y轴内容文字颜色
            },
            formatter: '{value} %'
          }
        },
        series: [{
          data: [12, 21, 3, 4, 51, 16, 1, 4, 5, 21, 21, 65],
          type: 'line',
          smooth: true
        }]
      }
    },
    option11() {
      return {
        color: ['#ee6666', '#fac858', '#91cc75', '#5470c6', '#3ba272'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          y: ' center',
          padding: [40, 30, 4, 1],
          itemWidth: 12
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '握把' },
              { value: 735, name: '控制手柄' },
              { value: 580, name: '传感器' },
              { value: 484, name: '挡件' },
              { value: 300, name: '高温管夹' }
            ]
          }
        ]
      }
    },
    option12() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '出库',
            type: 'bar',
            barWidth: '60%',
            data: [10, 20, 52, 200, 334, 258, 390, 123, 220, 666, 555, 652]
          }
        ]
      }
    },
    option13() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barWidth: '60%',
            data: [52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330],
            itemStyle: {
              color: '#57816d'
            }
          }
        ]
      }
    },
    option14() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['百分比', '万元']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 100,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {}
          },
          {
            type: 'value',
            min: 0,
            max: 0,
            position: 'right',
            offset: 80,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {}
          },
          {
            type: 'value',
            name: '万元',
            min: 0,
            max: 120,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {}
          }
        ],
        series: [
          {
            name: '百分比',
            type: 'bar',
            data: [3, 10, 50, 10, 60, 20, 11, 12, 13, 33, 21, 41]
          },
          {
            name: '万元',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }
    }

  }
}
</script>

<style scoped>
.charts {
  background-color: #dfe4ed;
  padding: 0.8vw;
}

.row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5vh;
}

.box-a {
  background-color: #fff;
  width: 66.2%;
  height: 40vh;
  border-radius: 10px;
  position: relative;
}

.box-b {
  background-color: #fff;
  width: 33%;
  height: 40vh;
  border-radius: 10px;
  position: relative;
}

.box-x {
  background-color: #fff;
  width: 24.3%;
  height: 40vh;
  border-radius: 10px;
  position: relative;
}

.charts-title {
  margin-top: 10px;
  margin-left: 10px;
}

.check {
  font-size: 20px;
  margin-top: 4px;
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
}

.charts-s {
  margin-bottom: 40px;
  margin-left: 28%;
}

.charts-picker {
  margin-bottom: 40px;
  margin-left: 26%;
}

.charts-p {
  font-size: 24px;
  text-align: center;
  margin-top: -20px;
}

.charts-flex {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 40px;
}
</style>
